// webpack的配置文件
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
    transpileDependencies: true,
    outputDir: "suming",
    chainWebpack: (config) => {
        config.module
            .rule("less")
            .test(/\.less$/)
            .oneOf("vue")
            .use("px2rem-loader")
            .loader("px2rem-loader")
            .before("postcss-loader") // this makes it work.
            .options({
                remUnit: 75, //根据视觉稿，rem为px的⼗分之⼀，750px  75rem
                remPrecision: 8 //保留8位⼩数
            })
            .end();
        config.resolve.alias
            .set("@", path.resolve(__dirname, "src"))
            .set("@components", path.resolve(__dirname, "src/components"));
    }
});

// 移动端rem适配
/**
 * 方式一:我们是在webpack里面vue.config.js进行了配置.下载了一个flexable.js的插件
 * 它的作用是初始化以及页面重置大小的时候.获取当前页面的宽度.把页面
 * 宽度的十分之一赋值给了根元素html的font-size属性. 而1rem永远等于
 * 一个font-size属性的值.所以就适配了.我们在写单位的时候.还下载了一个pxtorem的loader
 * 这个loader的作用是把px单位按照基准值换算成rem单位.
 *
 *方式二: 我们当时是引用了一个flexable.js的插件.它的作用是.....
 然后用了vscode里面安装了一个插件pxtorem 它的作用是把px单位按照基准值换算成rem单位
 */
